// 项目进展查看-查看
<template>
  <div class="projectProgressCheck">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/projectProgress' }">项目进展查看</el-breadcrumb-item>
      <el-breadcrumb-item>查看</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="part1">
      <div class="title">项目进度概况</div>
      <div class="part1-tab">
        <div style="background:#EFF2F7">
          <p>项目名称</p>
          <p>{{projectView.projectName}}</p>
          <p>定向比例</p>
          <p>{{projectView.directionalProportion}}%</p>
          <p>募集比例</p>
          <p>{{projectView.raiseInvestProportion}}%</p>
        </div>
        <div>
          <p>跟投总额（元）</p>
          <p>{{projectView.investMoney}}</p>
          <p>定向人数</p>
          <p>{{projectView.directionalNum}}</p>
          <p>募集份数（份）</p>
          <p>{{projectView.investNum}}</p>
        </div>
        <div style="background:#EFF2F7">
          <p>已申购人数</p>
          <p>{{projectView.alreadyBuyNum}}</p>
          <p>已锁定金额（元）</p>
          <p>{{projectView.lockPay}}</p>
          <p>状态</p>
          <p>{{projectView.statusTxt}}</p>
          </div>
        <div>
          <p>已支付金额（元）</p>
          <p>{{projectView.alreadyPay}}</p>
          <p>可申购金额（元）</p>
          <p>{{projectView.canInvestMoney}}</p>
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
    <div class="part2">
      <div class="title">项目跟投明细</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="员工名称：">
          <el-input v-model="formInline.userName1" placeholder="请输入员工名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="projectDetailList">查询</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-table
          border
          :header-cell-style="{background:'#EFF2F7'}"
          :data="projectDetail"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            fixed
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            label="员工"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="userNum"
            label="工号">
          </el-table-column>
          <el-table-column
            align="center"
            prop=""
            label="业务线">
            <template slot-scope="scope">
              {{usersMap[scope.row.userNum].businessLineName}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop=""
            label="部门">
            <template slot-scope="scope">
              {{usersMap[scope.row.userNum].departmentName}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop=""
            label="职位">
            <template slot-scope="scope">
              {{usersMap[scope.row.userNum].stationName}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderSunAmount"
            label="跟投额度">
          </el-table-column>
          <el-table-column
            align="center"
            prop="number"
            label="跟投份数">
          </el-table-column>
          <el-table-column
            align="center"
            prop="businesType"
            label="跟投类型">
            <template slot-scope="scope">
              <span v-show='scope.row.businesType == 1'>募集</span>
              <span v-show='scope.row.businesType == 2'>定向</span>
              <span v-show='scope.row.businesType == 3'>转让</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTimeStr"
            label="更新时间"
            width="180">
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page.sync="pageData1.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData1.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize">
        </el-pagination>
      </div>
    </div>
    <div class="part3">
      <div class="title">员工退费信息</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="员工名称：">
          <el-input v-model="formInline.userName2" placeholder="请输入员工名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="projectRefund">查询</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-table
          border
          :header-cell-style="{background:'#EFF2F7'}"
          :data="refundInfo"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            fixed
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="员工"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="jobNumber"
            label="工号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="businessLine"
            label="业务线">
          </el-table-column>
          <el-table-column
            align="center"
            prop="department"
            label="部门">
          </el-table-column>
          <el-table-column
            align="center"
            prop="position"
            label="职位">
          </el-table-column>
          <el-table-column
            align="center"
            prop="number"
            label="跟投份数">
          </el-table-column>
          <el-table-column
            align="center"
            prop="quota"
            label="跟投额度（元）">
            <template slot-scope="scope">
              {{scope.row.quota | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="realAmount"
            label="实付金额（元）">
            <template slot-scope="scope">
              {{scope.row.realAmount | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="refundAmount"
            label="退款金额（元）">
            <template slot-scope="scope">
              {{scope.row.refundAmount | numFormat}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="refundType"
            label="退费类型">
            <template slot-scope="scope">
              {{scope.row.refundType == 1 ? '转让':'募集'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="退款状态">
            <template slot-scope="scope">
              {{scope.row.status ? '已退款':'未退款'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTimeStr"
            width="180"
            label="更新时间">
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page.sync="pageData2.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData2.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
  name:'projectProgressCheck',
  data(){
    return {
      projectId:0,
      totalSize:0,
      projectView:{},
      projectDetail:[],
      refundInfo: [],
      usersMap:{},
      pageData1:{
        pageSize:10,
        pageNum:1
      },
      pageData2:{
        pageSize:10,
        pageNum:1
      },
      formInline: {
        userName1: '',
        userName2: ''
      },
    }
  },
  filters:{
    numFormat(val ){
      val += '';  
      let x = val.split('.');  
      let x1 = x[0];  
      let x2 = x.length > 1 ? '.' + x[1] : '';  
      var rgx = /(\d+)(\d{3})/;  
      while (rgx.test(x1)) {  
      x1 = x1.replace(rgx, '$1' + ',' + '$2');  
      }  
      return x1 + x2;  
    }
    
  },
  created(){
    this.getparams()
    this.projectDetailList()
    this.projectRefund()
  },
  methods:{
    getparams(){
      this.projectId = this.$route.query.projectId
      this.projectView = JSON.parse(this.$route.query.projectView)
    },
    // 项目跟投明细
    projectDetailList() {
      this.axios.post(api.projectProgressDetail,{
        pageNum:this.pageData1.pageNum,
        pageSize:this.pageData1.pageSize,
        userName:this.formInline.userName1,
        projectId:this.projectId
      }).then((res)=>{
        if(res.data.data.usersMap){
          this.usersMap = res.data.data.usersMap
        }
        this.projectDetail = res.data.data.orderInfoList.list
        this.totalSize = res.data.data.orderInfoList.total
      })
    },
    // 员工退费信息
    projectRefund(){
      this.axios.post(api.getUserRefundList,{
        pageSize:this.pageData2.pageSize,
        pageNum:this.pageData2.pageNum,
        userName:this.formInline.userName2,
        projectId:this.projectId
      }).then((res)=>{
        this.refundInfo = res.data.data.list
      }).catch((error)=>{
        console.log(error)
      })
    },
    handleSizeChange1(val,a) {
      this.pageData1.pageSize = val
      this.projectDetailList()
    },
    handleCurrentChange1(val) {
      this.projectDetailList()
    },
    handleSizeChange2(val,a) {
      this.pageData2.pageSize = val
      this.projectRefund()  
    },
    handleCurrentChange2(val) {
      this.projectRefund()
    }
  }
}
</script>

<style lang='stylus'>
.projectProgressCheck{
  .bread-title{
    height:30px;
    font-size:16px;
  }
  .title{
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
  }
  .el-pagination{
    margin-top:20px;
  }
  .part1,.part2,.part3{
    margin-bottom:50px;
  }
  .part1-tab{
    div{
      display:flex;
      p{
        padding:0;
        margin:0;
        flex:1;
        border-left:1px solid #ccc;
        border-top:1px solid #ccc;
        width:150px;
        height:40px;
        text-align:center;
        line-height:40px;
        &:last-child{
          border-right:1px solid #ccc;
        }
      }
      &:last-child{
        border-bottom :1px solid #ccc;
      }
      
    }
  }
}
</style>
